<template>
  <div class="step-container">
    <el-form ref="form" label-width="200px" class="demo-formData">
      <el-form-item label="姓名:"> {{ formData.realname }} </el-form-item>
      <el-form-item :label="paperCodeLabel">
        {{ formData.paperCode }}
      </el-form-item>
      <el-form-item label="电话:"> {{ formData.phone }} </el-form-item>
      <el-form-item label="地址:"> {{ formData.address }} </el-form-item>
      <el-form-item label="邮政编码:"> {{ formData.postalCode }} </el-form-item>
      <el-form-item label="电子邮箱:"> {{ formData.email }} </el-form-item>
      <el-form-item label="传真:"> {{ formData.fax }} </el-form-item>
      <template v-if="certType === '1'">
        <el-form-item label="资格证书编号:">
          {{ formData.paperCertCode }}
        </el-form-item>
      </template>
    </el-form>
    <template v-if="certType === '3'">
      <table
          cellpadding="0"
          cellspacing="0"
          style="
            table-layout: fixed;
            position: relative;
            width: 45%;
            min-width: 650px;
            margin: auto;
            align-self: center;
            align-content: center;
            align-items: center;
          ">
        <tr style="height: 20px;text-align: center;">
          <td colspan="3" >管理人员类别：</td>
          <td colspan="4" class="TableBorderOther">企业主要负责人（A类）</td>
          <td colspan="4" class="TableBorderOther">项目负责人（B类）</td>
          <td colspan="4" class="TableBorderRight">安全生产管理人员（C类）</td>
        </tr>
        <tr style="height: 20px;text-align: center;">
          <td colspan="3" >知识考试合格：</td>
          <td colspan="4" class="TableBorderBottom">
            {{ formData.safeQua?.mainScore > 0 ? '&#10003;' : '-' }}
          </td>
          <td colspan="4" class="TableBorderBottom">
            {{ formData.safeQua?.projScore > 0 ? '&#10003;' : '-'}}
          </td>
          <td colspan="4" class="TableBorderRightBottom">
            {{ formData.safeQua?.classifyScore > 0 ? '&#10003;' : '-'}}
          </td>
        </tr>
      </table>
    </template>
  </div>
</template>
<script>
import userApi from '@/api/user';
import safeTypeDict from '@/assets/js/safeTypeDict';
import { decrypt } from '@/utils/sms4util';
export default {
  props: {
    // 申请ID
    id: {
      type: String,
    },
    // 证书类型
    certType: {
      type: String,
    }
  },
  data() {
    return {
      formData: {},
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    // 隐藏手机号中间四位
    phone() {
      let phone = this.formData.phone;
      const tel = phone.substr(0, 3) + '****' + phone.substr(-4, 4);
      return tel;
    },
    // 证件类型
    paperCodeLabel() {
      let paperType = this.formData.paperType;
      const obj = {
        111: '身份证',
        '001': '社会保障号',
        516: '港澳居民来往大陆通行证编号',
        511: '台湾居民来往大陆通行证编号',
        414: '普通护照编号',
        411: '外国人永久居留证或永久居留许可编号',
      };
      return obj[paperType] + ':';
    },
    // 安全生产类别
    safeType() {
      let safeTypeCode = this.formData.safeType;
      let dictObject = safeTypeDict.safeType.find((item) => item.value == safeTypeCode);
      return dictObject?.label;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let params = {
        id: this.id || this.userId,
        type: this.certType || '1',
      };
      // 获取用户信息
      this.$emit('loading', true);
      const res = await userApi.getUserInfo(params);
      this.formData = {
        ...this.formData,
        ...res,
        phone: res.phone ? decrypt(res.phone) : '',
        paperCode: res.paperCode ? decrypt(res.paperCode) : '',
      };
      this.$emit('initReady', this.formData);
      this.$emit('loading', false);

    },
  },
};
</script>
<style lang="scss" scoped>
.step-container {
  margin-top: 90px;
  width: 100%;
  padding: 20px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text {
    width: 100%;
    margin-top: 18px;
    font-size: 14px;
  }
  .check {
    margin-top: 40px;
  }
  .TableBorderOther {
    border-top: gray 1px solid;
    border-left: gray 1px solid;
  }
  .TableBorderRight {
    border-right: gray 1px solid;
    border-top: gray 1px solid;
    border-left: gray 1px solid;
  }
  .TableBorderBottom {
    border-top: gray 1px solid;
    border-left: gray 1px solid;
    border-bottom: gray 1px solid;
  }
  .TableBorderRightBottom {
    border-right: gray 1px solid;
    border-top: gray 1px solid;
    border-left: gray 1px solid;
    border-bottom: gray 1px solid;
  }
  .TableBorderOnlyRight {
    border-right: gray 1px solid;
  }
}
</style>
